<template>
  <div class="container" v-if="taxRateAuth && userType == 1">
    <page-header :title="$t('m.Tax_setting')" :has-return="true"> </page-header>

    <div
      class="setting_div"
      :class="{
        disabled_color: !taxRateOperation
      }"
    >
      <div class="setting_div1">
        <div class="setting_div_title1" style="margin-top:0px;">
          {{ $t('m.Tax_setting') }}
        </div>
        <div class="setting_div_content1">
          {{ $t('m.Set_up_tax') }}
        </div>
        <div class="setting_div_title1">
          {{ $t('m.Amount_Including_Tax') }}
        </div>
        <div class="wrapper" v-if="More1">
          <input id="exp2" class="exp" type="checkbox" />
          <div class="text">
            <label class="btn" for="exp2" @click="More1 = !More1">{{
              $t('m.More')
            }}</label>
            {{ $t('m.Amount_Including_Tax_hint') }}
          </div>
        </div>
        <div class="setting_div_content1" v-else>
          {{ $t('m.Amount_Including_Tax_hint') }}
        </div>
        <div class="Collapse_btn" v-if="!More1" @click="More1 = !More1">
          {{ $t('m.Collapse') }}
        </div>

        <div class="setting_div_title1">
          {{ $t('m.Amount_Excluding_Tax') }}
        </div>
        <div class="wrapper" v-if="More2">
          <input id="exp3" class="exp" type="checkbox" />
          <div class="text">
            <label class="btn" for="exp3" @click="More2 = !More2">{{
              $t('m.More')
            }}</label>
            {{ $t('m.Amount_Excluding_Tax_hint') }}
          </div>
        </div>
        <div class="setting_div_content1" v-else>
          {{ $t('m.Amount_Excluding_Tax_hint') }}
        </div>
        <div class="Collapse_btn" v-if="!More2" @click="More2 = !More2">
          {{ $t('m.Collapse') }}
        </div>
        <!-- <div class="setting_div_title1">
          {{ $t('m.Tax_note') }}
        </div>
        <div class="wrapper" v-if="More3">
          <input id="exp4" class="exp" type="checkbox" />
          <div class="text">
            <label class="btn" for="exp4" @click="More3 = !More3">{{
              $t('m.More')
            }}</label>
            {{ $t('m.Tax_note_hint') }}
          </div>
        </div>
        <div class="setting_div_content1" v-else>
          {{ $t('m.Tax_note_hint') }}
        </div>
        <div class="Collapse_btn" v-if="!More3" @click="More3 = !More3">
          {{ $t('m.Collapse') }}
        </div> -->
      </div>
      <div>
        <div class="setting_div2">
          <el-form :model="form" :rules="ruleForm" ref="form" class="el_form">
            <div class="create_form_usage">
              <div class="create_form_title1">
                {{ $t('m.Tax_setting') }}
              </div>
            </div>
            <div style="margin-bottom: 20px;">
              <el-switch
                v-model="form.state"
                active-color="var(--text-color)"
                inactive-color="#d2d8e2"
                @change="changeSwitch"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </div>
            <div class="create_form_usage">
              <div class="create_form_title1">{{ $t('m.Tax_rate') }}*</div>
            </div>
            <el-form-item prop="tax">
              <el-input
                :placeholder="$t('m.Please_enter')"
                v-model="form.tax"
                clearable
                @input="changeValue"
                maxlength="5"
              >
                <i
                  slot="suffix"
                  class="el-input__icon"
                  style="color:#000;font-size:14px;padding-right:10px"
                  >%</i
                >
              </el-input>
            </el-form-item>
            <div class="create_form_usage" style="margin-bottom:0;">
              <div class="create_form_title1">
                {{ $t('m.Tax_description') }}
              </div>
            </div>
            <el-form-item
              prop="description"
              v-if="form.isShow == 1"
              key="description"
            >
              <el-checkbox
                v-model="form.isShow"
                class="el_checkbox"
                :true-label="1"
                :false-label="0"
                @change="changeDisabled"
                >{{ $t('m.Allow_description_checkout') }}</el-checkbox
              >
              <div class="setting_div_input">
                <el-input
                  :placeholder="$t('m.Please_enter')"
                  v-model="form.description"
                  :maxlength="200"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  show-word-limit
                  @input="changeDisabled"
                  clearable
                >
                </el-input>
              </div>
            </el-form-item>
            <el-form-item v-else>
              <el-checkbox
                v-model="form.isShow"
                class="el_checkbox"
                :true-label="1"
                :false-label="0"
                @change="changeDisabled"
                >{{ $t('m.Allow_description_checkout') }}</el-checkbox
              >
              <div class="setting_div_input">
                <el-input
                  :placeholder="$t('m.Please_enter')"
                  v-model="form.description"
                  :maxlength="200"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  show-word-limit
                  @input="changeDisabled"
                  clearable
                >
                </el-input>
              </div>
            </el-form-item>
            <div class="create_form_usage">
              <div class="create_form_title1">{{ $t('m.Set_tax_title') }}*</div>
            </div>
            <el-form-item
              class="el_radio"
              prop="includedTax"
              v-if="form.state == 1"
              key="includedTax"
            >
              <el-radio-group
                v-model="form.includedTax"
                @input="changeDisabled"
              >
                <div style="margin-bottom:8px;">
                  <el-radio :label="1">{{
                    $t('m.AmountIncludingTax')
                  }}</el-radio>
                </div>
                <div>
                  <el-radio :label="0">{{
                    $t('m.AmountExcludingTax')
                  }}</el-radio>
                </div>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="el_radio el_radio2" v-else>
              <el-radio-group v-model="form.includedTax" disabled>
                <div style="margin-bottom:8px;">
                  <el-radio :label="1">{{
                    $t('m.AmountIncludingTax')
                  }}</el-radio>
                </div>
                <div>
                  <el-radio :label="0">{{
                    $t('m.AmountExcludingTax')
                  }}</el-radio>
                </div>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div
          v-if="taxRateOperation"
          style="text-align: right;margin-top: 20px;"
        >
          <el-button
            class="setting_div_btn"
            @click="submit"
            :disabled="disabled"
            :class="disabled ? 'setting_btn_disabled' : ''"
            >{{ $t('m.save') }}</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      form: {
        isShow: '',
        description: '',
        state: '',
        tax: '',
        includedTax: ''
      },

      ruleForm: {
        tax: [
          {
            required: true,
            message: this.$t('m.Enter_tax_rate'),
            trigger: 'blur'
          }
        ],
        description: [
          {
            required: true,
            message: this.$t('m.Please_enter'),
            trigger: 'blur'
          }
        ],
        includedTax: [
          {
            required: true,
            message: this.$t('m.pleaseChoose'),
            trigger: 'change'
          }
        ]
      },
      disabled: true,
      taxRateAuth: this.permissionsId(232),
      taxRateOperation: this.permissionsId(233),
      userType: this.getUserType(), //用户身份
      More1: true,
      More2: true,
      More3: true
    }
  },

  mounted () {
    if (!this.taxRateAuth && this.userType != 1) {
      return
    }
    this.getTaxSetting()
  },
  methods: {
    // 获取税率设置
    getTaxSetting () {
      this.$api.setting.getTaxSetting().then(res => {
        if (this.$ok(res)) {
          this.form = res.data
        }
      })
    },
    changeSwitch (e) {
      this.changeDisabled()
      // if (this.form.state == 0) {
      //   this.form.includedTax = ''
      // }
    },
    changeValue () {
      this.changeDisabled()
      this.form.tax = this.$check.amount(this.form.tax)
      if (this.form.tax > 100) {
        this.form.tax = 100
      }
    },
    changeDisabled () {
      this.disabled = false
    },
    // 提交
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        this.$api.setting.setTaxSetting(this.form).then(res => {
          if (this.$ok(res)) {
            this.$message.success(res.message)
            this.getTaxSetting()
            this.disabled = true
          } else {
            this.$message.error(res.message)
          }
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  width: 100%;
}
@media screen and (min-width: 1221px) {
  .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}
.page-header {
  padding: 20px 0;
}
.page-header,
.setting_div {
  width: 100%;
  min-width: 1000px !important;
  max-width: 1000px !important;
}
.setting_div {
  display: flex;
  justify-content: center;
  // margin-top: 16px;
  width: 100%;
  .setting_div1 {
    width: 362px;
    padding: 24px 0;
    margin-right: 44px;

    .setting_div_title1 {
      font-size: 20px;
      font-weight: 600;
      text-align: left;
      color: #39404d;
      line-height: 24px;
      margin-bottom: 12px;
      margin-top: 20px;
    }
    .setting_div_content1 {
      font-size: 16px;
      font-weight: 400;
      text-align: left;
      color: #39404d;
      line-height: 19px;
    }

    .wrapper {
      display: flex;
      margin: auto;
      width: 362px;
      overflow: hidden;
    }
    .text {
      color: #39404d;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
      position: relative;
      line-height: 19px;
      max-height: 38px;
      transition: 0.3s max-height;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .text::before {
      content: '';
      height: calc(100% - 19px);
      float: right;
    }
    .text::after {
      content: '';
      width: 999vw;
      height: 999vw;
      position: absolute;
      margin-left: -100px;
    }
    .btn {
      position: relative;
      float: right;
      clear: both;
      // margin-left: 5px;
      font-size: 16px;
      line-height: 19px;
      color: var(--text-color);
      cursor: pointer;
    }
    .btn::after {
      content: '';
    }
    .exp {
      display: none;
    }
    .exp:checked + .text {
      max-height: none;
    }
    .exp:checked + .text::after {
      visibility: hidden;
    }
    .exp:checked + .text .btn::before {
      visibility: hidden;
    }
    .exp:checked + .text .btn::after {
      content: '';
    }
    // .btn::before {
    //   content: '...';
    //   position: absolute;
    //   left: -5px;
    //   color: #39404d;
    //   transform: translateX(-100%);
    // }
    .Collapse_btn {
      font-size: 16px;
      text-align: left;
      color: var(--text-color);
      line-height: 19px;
      margin: 12px 0 0 0;
      cursor: pointer;
    }
  }
  .setting_div2 {
    width: 594px;
    padding: 24px;
    padding-bottom: 4px;
    background: #ffffff;
    border-radius: 10px;
    // max-height: 480px;

    .setting_div_title2 {
      font-size: 17px;
      font-weight: 600;
      text-align: left;
      color: #39404d;
      line-height: 20px;
      margin-bottom: 8px;
    }

    .setting_div_input >>> .el-textarea__inner:focus {
      border-color: var(--text-color);
    }

    .el_form {
      ::v-deep .el-form-item {
        margin-bottom: 20px;
      }
      ::v-deep .el-form-item__content {
        line-height: 36px;
      }
      .create_form_title1 {
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        color: #39404d;
        line-height: 22px;
        margin-right: 6px;
      }

      .create_form_usage {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        position: relative;
        .usageImg {
          width: 16px;
          height: 16px;
          position: absolute;
          left: -28px;
          top: 2px;
        }
      }

      // 单选框
      .el_radio {
        ::v-deep .el-radio {
          line-height: 16px;
        }
        ::v-deep .el-radio__input {
          line-height: 16px;
        }

        ::v-deep .el-radio__label {
          color: #39404d !important;
        }

        ::v-deep .is-checked .el-radio__label {
          color: var(--text-color) !important;
        }

        ::v-deep .el-radio__input.is-checked .el-radio__inner {
          background: var(--text-color) !important;
          border-color: var(--text-color) !important;
        }
        ::v-deep .el-radio__inner:hover {
          border-color: var(--text-color) !important;
        }
      }
      .el_radio2 {
        ::v-deep .el-radio__label {
          color: #888888 !important;
        }
        ::v-deep .is-checked .el-radio__label {
          color: #888888 !important;
        }

        ::v-deep .el-radio__input.is-checked .el-radio__inner {
          background: #e4e7ed !important;
          border-color: #e4e7ed !important;
        }
        ::v-deep .el-radio__inner:hover {
          border-color: #e4e7ed !important;
        }
      }
    }
  }
  .el_checkbox {
    ::v-deep .el-checkbox__label {
      padding-left: 4px;
      font-size: 14px;
      font-weight: 500;
      text-align: left;
      color: #39404d;
      line-height: 16px;
    }
    ::v-deep .el-checkbox__input .el-checkbox__inner {
      border-radius: 2px;
      width: 14px;
      height: 14px;
    }
    ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background: var(--text-color);
      border-color: var(--text-color);
      border-radius: 2px;
    }
    ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
      font-size: 14px;
      font-weight: 500;
      text-align: left;
      color: var(--text-color) !important;
      line-height: 16px;
    }
    ::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: var(--text-color);
      border-radius: 2px;
    }
  }
}
.setting_div_btn {
  width: 220px;
  height: 36px;
  background: var(--text-color) !important;
  border-radius: 4px;
  font-weight: 500;
  text-align: center;
  color: #ffffff !important;
}
.setting_btn_disabled {
  opacity: 0.4;
}
.disabled_color {
  opacity: 0.5;
  pointer-events: none !important;
}
</style>
